<template>
  <div>
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="content-row">
      <div class="newbuildwrap whitebg">
        <div class="mainwrap">
          <div class="buildwrap clearfix">
            <el-empty description="暂无数据" v-if="empty"></el-empty>
            <div class="builditem column-4" v-for="(item, index) in listData" :key="index">
              <a
                :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                delay="true"
                target="_blank"
                class="b-img pic"
              >
                <el-image
                  :src="item.imgUrl || ''"
                  :alt="item.name"
                  :title="item.name"
                  fit="cover"
                  style="width: 100%; height: 100%; border-radius: 4px 4px 0 0"
                  lazy
                ></el-image>
                <div class="b-shade">
                  <span class="b-title">{{ item.name }}</span>
                  <span class="b-price">
                    单价约：{{
                    item.meterPrice ? `${item.meterPrice}元/㎡` : "售价待定"
                    }}
                  </span>
                </div>
              </a>
              <div class="b-relate">
                <p class="b-reason">
                  <small>推荐理由</small>
                  <q>{{ item.recommendReason }}</q>
                </p>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="paging page-row" v-show="!empty">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page="pageNum"
              :page-size="pageSize"
              :total="total"
              hide-on-single-page
              @current-change="pageChange"
            ></el-pagination>
          </div>
            <!-- 关键区域，街道，周边 -->
            <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
  </div>
</template>

<script>
var head = {
  title: '',
  content: '',
  keywords: '',
}
import u from '@/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [{ rel: 'stylesheet', href: '/css/yzfy.css' }],
    }
  },
  data() {
    return {}
  },
  validate({ params }) {
    return /^(.*?)\.html/.test(params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.getCurrentCityData.data
    var cityList = ctx.cityList
    var crumbListData = []
    var splitPageUrl = ctx.params.id.split('.')
      ? ctx.params.id.split('.')[0].split('-')
      : '' // 拆分页面路径
    var listData = []
    var empty = false // 是否展示空数据
    var goodType = ctx.params.id.split('-')
      ? ctx.params.id.split('-')[0].split('.')[0]
      : ''
    var pageNum = Number(splitPageUrl[1]) || 1
    var pageSize = 8
    var total = 1
    // 修改栏目信息
    var titles = ''
    switch (splitPageUrl[0]) {
      case '9583311':
        titles = '教育地产'
        break
      case '9583312':
        titles = '景观地产'
        break
      case '9583313':
        titles = '现房'
        break
      case '9583314':
        titles = '地铁房'
        break
      case '9583315':
        titles = '小户型'
        break
      case '9583316':
        titles = '品牌地产'
        break
    }
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: `${currentCity.cityName}${titles}`,
        href: prefixUrl + ctx.route.path,
      },
    ]
    // 修改页面SEO
    head.title = `${titles}推荐-${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
    head.content = `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖是新型的互联网新房导购平台，为您提供【${titles}】等热门好盘`
    head.keywords = `${titles}，${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
    // 获取列表
    let getListData = await u.http({
      url: '/pc/houseInfoGood/queryHouseInfoGoodList',
      params: {
        host: ctx.req.headers.host,
        goodType,
        pageNum,
        pageSize,
      },
    })
    if (getListData.code == 200) {
      listData = getListData.data.list
      total = getListData.data.total
      empty = getListData.data.list.length > 0 ? false : true
    }

    return {
      prefixUrl,
      currentCity,
      cityList,
      crumbListData,
      listData,
      pageNum,
      pageSize,
      total,
      empty,
      regionList: ctx.regionList
    }
  },
  mounted() {
    this.updatePageList()
  },
  methods: {
    // 分页追加A标签
    updatePageList() {
      // 设置分页路径
      let splitPathname = location.pathname.split('/')
      let pathnameLen = splitPathname.length > 0 ? splitPathname.length - 1 : 0
      let params = splitPathname[pathnameLen]
      let splitParams = params.split('-')
        ? [params.split('-')[0].split('.')[0]]
        : [] // 拆分参数路径 重组路径
      let lidoc = document.querySelectorAll('.page-row .el-pager li')
      lidoc.forEach((item, index) => {
        let nowParams = 'javascript:void(0)'
        if (item.innerText) {
          if (item.innerText > 1) {
            let itemArr = [item.innerText]
            nowParams =
              this.prefixUrl +
              '/yzfy/' +
              this.repUrl(splitParams, itemArr) +
              '.html'
          } else {
            nowParams =
              this.prefixUrl + '/yzfy/' + this.repUrl(splitParams, []) + '.html'
          }
        }
        item.innerHTML = `<a href="${nowParams}" style="display: block">${item.innerHTML}</a>`
      })
    },

    // 将两个数组合并新路径参数
    repUrl(arr, pageArr) {
      arr.forEach((item, index) => {
        if (/\p[1-9]\d*/.exec(item)) {
          arr.splice(index, 1)
        }
      })
      return arr.concat(pageArr).join('-')
    },

    // 分页发生改变
    pageChange(e) {
      let repVal = /\-[1-9]\d*/.exec(location.href)
        ? /\-[1-9]\d*/.exec(location.href)[0]
        : ''

      let nowHref = ''
      if (repVal) {
        nowHref =
          e > 1
            ? location.href.replace(repVal, `-${e}`)
            : location.href.replace(repVal, '')
      } else {
        let splitUrl = location.pathname.split('.')[0]
        nowHref = `${splitUrl}-${e}.html`
      }
      location.href = nowHref
    },
  },
}
</script>